<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>视频转发</h2>
        </div>
      </div>
      <Card style="margin-bottom: 10px;">
        <div class="normal-list-page-hd clearfix">
            <Input class="mr-10" placeholder="发送者" :clearable=true v-model="queryData.forwarder" style="width:200px;" />
            <Input class="mr-10" placeholder="接收者" :clearable=true v-model="queryData.recipient" style="width:200px;" />
            <Button type="primary" custom-icon="iconfont icon-chaxun" size="small" @click="inQuire">查询</Button>
        </div>
      </Card>
      <div class="normal-box-bd">
        <div class="normal-list-page-mod">
          <div class="normal-list-page-bd">
            <Table border :loading="list.loading" :columns="list.columns" :data="list.tableData"></Table>
          </div>
          <div>
            <Page :total="queryData.totalRecord" :page-size="queryData.pageSize" :current="queryData.page" show-total
              show-elevator @on-change="changePage"></Page>
            <!-- <span style="float: right;">共{{queryData.totalRecord}}条数据</span> -->
          </div>
        </div>
      </div>
      <Modal v-model="modal" footer-hide width="830">
        <div class="video">
            <video id="example" class="video-js vjs-default-skin" controls>
                <source :src="link" />
                <div id="example_video_1"></div>
            </video>
        </div>
        <div class="load" v-if="load">
          <Spin size="large"  fix>
            <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
            <div>线路切换中，请稍后 . . .</div>
          </Spin>
        </div>
    </Modal>
    </div>
  </div>
</template>
<script>
import gcDispenserApi from "@/api/base_sys/gcDispenser.js";
// import moment from "moment";
import {Message} from "iview";
import global from '@/assets/js/global'

  export default {
    data() {
      return {
        modal: false,
        load: false,
        type:  "application/x-mpegURL ",
        link: 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8',
        url: '/api/voForward/list',

        // 列表
        list: {
          loading: false,
          selections: [],
          // 列表展示数据
          tableData: [],
          // 表格表头
          columns: [{
              title: "发送者",
              key: "forwarder",
              align: "center",
              minWidth: 80
            },
            {
              title: "接收者",
              key: "recipient",
              align: "center",
              minWidth: 80
            },
            {
              title: "链接",
              key: "connection",
              align: "center",
              minWidth: 700,
              render:(h,params)=> {
                  return h('a',{
                    attrs: {class: 'f-hide',href: params.row.connection,target:"_blank"},
                    style: {width: '700px',},
                      // on: {
                      //     click:()=> {this.changeVideo(params.row.connection)}
                      // }
                  },params.row.connection)
              }
            },
            {
              title: "转发时间",
              key: "insertTime",
              align: "center",
              minWidth:100,
            }
          ]

        },
        // 页面查询数据
        queryData: {
            limit: 10,
            page: 1,
            totalRecord: 0,
            forwarder: '', // 发送者
            recipient: '', // 接收者
        },

        // 播放配置项
        videoOption: {
          autoplay: true, // 自动播放，默认false
          // muted: true,      // 静音
          // controls: true, // 是否拥有控制条，默认true
          height: 400, // 视频容器的高度，字符串或数字 单位像素 比如： height:300 or height:'300px'
          width: 800, // 视频容器的宽度
          loop: true, // 视频播放结束后，是否循环播放
          poster: "http://vjs.zencdn.net/v/oceans.png", // 播放前显示的视频画面，播放开始之后自动移除。通常传入一个URL(可以写在行内作为属性)
          preload: 'auto' // 预加载
        }
      }
    },
    created() {
      this.getTableData();
      // this.link = 'http://ivi.bupt.edu.cn/hls/cctv2.m3u8'
    },
    mounted() {
      this.initVideo()
    },
    watch: {

    },
    methods: {
      // 获取列表
      async getTableData() {
        console.log(this.queryData);
        this.queryData.totalRecord = undefined;
        let result = await gcDispenserApi.getData(this.url,this.queryData)
        console.log(result);
        this.list.tableData = result.data.list;
        this.queryData.totalRecord = result.data.totalRecord;
        this.queryData.limit = result.data.pageSize;
      },


      //查询
      inQuire() {
		    this.queryData.page=1;
        this.getTableData();
      },


      // 换页
      changePage(page) {
        this.queryData.page = page;
        this.getTableData();
      },

      // 初始化播放器
      initVideo() {
        let player = videojs('example', this.videoOption, function onPlayerReady() {
            videojs.log('播放器已经准备好了!');
            // this.play(); // 此处this指向的是Video.js的实例对像player
            this.on('ended', function() { // 监听播放结束
                videojs.log('播放结束了!');
            });
        });
      },
      // 切换视频
      async changeVideo(link) {
        this.load = true
        this.modal = true
        let player = videojs('example');
        // let curtime = player.currentTime();  //获取当前播放器的播放时间
        // this.link = ''
        await player.src(link); //设置播放器的src
         player.load(); //重新加载播放器
        //  player.play();
        // player.currentTime(curtime);  //设置播放器从curtime开始播放
        setTimeout(()=>{this.load = false},3000)
      },
    },


  };
</script>
<style lang="css">
  .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
    .demo-spin-col{
        height: 100px;
        position: relative;
        border: 1px solid #eee;
    }
</style>
<style lang="less" scoped>
    .load {
      width: 100%;
      height: 100%;
      background: #000;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 7px;
      overflow: hidden;
      transition: all ease 2s;
    }

</style>
